<template>
  <div>
    <p class="title">举报管理</p>
    <div>
      <div class="he">
        <div class="box1">
          <div>
            <span>状态：</span>
            <el-select v-model="handleState" @change="search" placeholder="全部" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div>
          <el-input v-model="content" @change="search" clearable class="input" size="small" prefix-icon="el-icon-search"
            placeholder="搜索昵称手机号">
          </el-input>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border>
        <el-table-column type="index" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column label="举报模块" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.sourceType==1">动态</span>
            <span v-else-if="scope.row.sourceType==2">视频</span>
            <span v-else-if="scope.row.sourceType==3">用户</span>
            <span v-else-if="scope.row.sourceType==4">直播</span>
            <span v-else-if="scope.row.sourceType==4">活动作品</span>
          </template>
        </el-table-column>
        <el-table-column prop="uidName" label="举报人" align="center">
        </el-table-column>
        <el-table-column prop="reportUidName" label="被举报用户" align="center">
        </el-table-column>
        <el-table-column prop="reportTypeName" label="举报类型" align="center">
        </el-table-column>
        <el-table-column prop="reportContent" label="举报描述" align="center">
        </el-table-column>
        <el-table-column prop="reportTime" label="举报时间" align="center">
        </el-table-column>
        <el-table-column prop="handlerName" label="处理人" align="center">
        </el-table-column>
        <el-table-column prop="handleTime" label="处理时间" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.handleState==1">已处理</span>
            <span v-else-if="scope.row.handleState==2">未处理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="$router.push({ path: '/Home/CheckReport', query: { reportId:scope.row.reportId } })"
              type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Page :total="total" :PageNumber.sync="pageNumber" :PageSize.sync="pageSize" @current-change="changeCurrentPage"
        @size-change="handleSizeChange">
      </Page>
    </div>
  </div>
</template>

<script>
  import Page from "@/components/page.vue";
  import report from "@/apis/modules/report"

  export default {
    components: {
      Page,
    },
    data() {
      return {
        handleState: "all",//处理状态 all 全部 1 已处理 2 未处理
        content: "",//搜索内容
        pageNumber: 1,//	当前页数
        pageSize: 10,//	每页显示多少条
        total: 0,//总数
        options: [
          {
            value: "all",
            label: "全部",
          },
          {
            value: "1",
            label: "已处理",
          },
          {
            value: "2",
            label: "未处理",
          },
        ],
        tableData: [],//列表数据
      };
    },
    mounted() {
      this.getReport()
    },
    methods: {
      // 获取举报管理
      async getReport() {
        const { code, data, msg } = await report.getReport({
          handleState: this.handleState,
          content: this.content,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        if (code == 200) {
          this.total = data.count;
          this.tableData = data.list;
        }
      },
      // 条件搜索
      search() {
        this.pageNumber = 1;
        this.getReport()
      },
      //改变当前页数
      changeCurrentPage(val) {
        console.log(val);
      },
      //改变每页显示条数
      handleSizeChange(val) {
        console.log(val);
      },

    }
  };
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .he {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .box1 {
      width: 800px;
      display: flex;
      justify-content: space-between;

      >div {
        display: flex;

        span {
          width: 100px;
          line-height: 30px;
        }
      }
    }

    .el-select {
      margin-right: 40px;
    }
  }


  .table {
    margin-top: 20px;
  }
</style>